/<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="用户ID">
          <template slot="content">
            <el-input
              v-model="formData.member_id"
              clearable
              placeholder="请输入用户ID"
            />
          </template>
        </BiFormItem>
        <miniAppSelect
          :multiple="true"
          :is-resize="isResize"
          :reserve="false"
          @result="miniAppResult"
        />
        <!--           :default-value="[formData.feed_start_time,formData.feed_end_time]" -->
        <DateSelect
          label="投诉时间"
          :clearable="false"
          :default-value="defaultValue"
          :is-resize="isResize"
          @result="resultDate"
        />
        <BiFormItem label="投诉类型">
          <template slot="content">
            <el-select
              v-model="formData.type"
              clearable
            >
              <el-option
                v-for="item in optionsList.typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="处理状态">
          <template slot="content">
            <el-select
              v-model="formData.handle_status"
              clearable
            >
              <el-option
                v-for="item in optionsList.handle_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="处理人">
          <template slot="content">
            <el-input
              v-model="formData.operator"
              type="text"
            ></el-input>
          </template>
        </BiFormItem>
        <DateSelect
          label="投诉处理时间"
          :is-resize="isResize"
          @result="handleDate"
        />
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <h4 class="allData_title">
        <div class="allData_title_text">
          数据概览
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
          >
            <div slot="content">
              <p>1、数据半小时同步一次</p>
              <p>2、短剧投诉数据中不统计无“投诉短剧、剧集”的数据</p>
            </div>
            <i
              style="color: #606266;"
              class="el-icon-question"
            ></i>
          </el-tooltip>
        </div>
        <el-button
          type="text"
          class="open"
          @click="onOpenView"
        > <i :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down' "></i> {{ isOpen ? '收起' : '展开' }}</el-button>
      </h4>
      <div
        v-show="isOpen"
        class="flex"
      >
        <div class="flex_left">
          <el-select
            v-model="field"
            placeholder="请选择"
            @change="onGetOverViewData"
          >
            <el-option
              v-for="item in fieldList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex_rigth">
          <el-radio-group
            v-if="field == 'time_member_feedback'"
            v-model="granularity"
            @change="onGetOverViewData"
          >
            <el-radio-button label="day">按天</el-radio-button>
            <el-radio-button label="hour">按时</el-radio-button>
          </el-radio-group>
          <el-button
            v-if="field != 'time_member_feedback'"
            style="margin-left: 15px;"
            @click="onViewTab"
          >切换视图</el-button>
        </div>
      </div>
      <div
        v-show="isOpen"
        class="overView_box"
      >
        <AllData
          v-show="viewActive == 'column'"
          ref="dayRecharge"
          v-loading="dayAmountChartLoading"
          :id-index="'one_'+dayAmountChartRadio"
          :chart-data="dayAmountChartData"
        ></AllData>
        <div
          v-show="viewActive == 'pie'"
          style="display: flex;"
        >
          <div style="width: 50%;">
            <h3>投诉人数占比</h3>
            <AllPie
              ref="dayRecharge"
              v-loading="dayAmountChartLoading"
              :id-index="'tow_'+dayAmountChartRadio"
              :chart-data="dayAmountChartData"
              :view-type="'value'"
            ></AllPie>
          </div>
          <div style="width: 50%;">
            <h3>投诉条数占比</h3>
            <AllPie
              ref="dayRecharge"
              v-loading="dayAmountChartLoading"
              :id-index="'truee_'+dayAmountChartRadio"
              :chart-data="dayAmountChartData"
              :view-type="'percent'"
            ></AllPie>
          </div>

        </div>
      </div>
    </Block>
    <Block class="content-table">
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:mini_app_name="{row}">
            <div style="display: flex; align-items: center;">
              <div>
                <p> <span>{{ row.mini_app_name }}</span>
                  <svg-icon
                    v-if="row.app_type==1"
                    style="margin-left: 10px;"
                    icon-class="miniapp"
                    class="imageIcon"
                  />
                  <svg-icon
                    v-else
                    style="margin-left: 10px;"
                    icon-class="douyin"
                    class="imageIcon"
                  />
                </p>
                <p>ID:{{ row.mini_app_id }}</p>
              </div>
            </div>
          </template>
          <template v-slot:member_id="{row}">
            <p
              style="cursor: pointer;color:#06C261"
              @click="showDetails(row)"
            >{{ row.member_id }}</p>
          </template>
          <template v-slot:describe="{row}">
            <el-tooltip
              class="item"
              effect="dark"
              :content="row.describe"
              placement="top-start"
            >
              <p class="text">{{ row.describe }}</p>
            </el-tooltip>
          </template>
          <template v-slot:remark="{row}">
            <div class="remarks">{{ row.remarks }}</div>
          </template>
          <template v-slot:zip="{row}">

            <!-- v-if="row.status == 0" -->
            <div v-if="row.handle_status==0">
              <el-button
                v-permission:feedback-handle
                type="text"
                @click="onHandle(row)"
              >处理投诉</el-button>
            </div>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :row-info="drawer.row"
      :drawer-title="drawer.title"
      :component="detailsLayer"
      drawer-size="60%"
    ></BiDrawer>
    <BiDrawer
      v-model="handleDrawer.visible"
      :row-info="handleDrawer.row"
      drawer-title="处理投诉"
      :component="Handle"
      drawer-size="600px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import detailsLayer from '../user/component/detailsLayer.vue'
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import DateSelect from '@/common/component/form/dateSelect.vue'
import { commonData } from '@/api/common'
import { feedbackIndex } from '@/api/feedback'
import AllData from './component/allData'
import AllPie from './component/allPie'
import { feedbackOverView } from '@/api/feedback'
import Handle from './component/Handle.vue'
export default {
  components: {
    miniAppSelect,
    DateSelect,
    AllData,
    AllPie
  },
  data() {
    return {
      Handle,
      detailsLayer,
      dayAmountChartLoading: false,
      dayAmountChartRadio: 0,
      loading: false,
      isResize: false,
      tabList: [{ label: '数据概览', value: '1', component: 'allData' }],
      tabsActive: '1',
      resizeData: true,
      isOpen: false,
      granularity: '',
      dayAmountChartData: [],
      defaultValue: [this.$moment().format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')],
      formData: {
        member_id: '',
        mini_app_id: [],
        feed_start_time: this.$moment().format('YYYY-MM-DD'),
        feed_end_time: this.$moment().format('YYYY-MM-DD'),
        handle_start_time: '',
        handle_end_time: '',
        operator: '',
        handle_status: '',
        type: ''
      },
      field: 'playlet_feedback',
      fieldList: [
        {
          label: '短剧投诉数据(前10位)',
          value: 'playlet_feedback'
        },
        {
          label: '投诉类型数据',
          value: 'type_feedback'
        },
        {
          label: '各时段投诉用户数据',
          value: 'time_member_feedback'
        },
        {
          label: '小程序投诉数据(前10位)',
          value: 'mini_app_feedback'
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        {
          label: '用户ID',
          prop: 'member_id',
          minWidth: 120,
          slotScope: true
        },
        {
          label: '小程序',
          prop: 'mini_app_name',
          minWidth: 120,
          slotScope: true
        },
        {
          label: '投诉短剧',
          prop: 'playlet_title',
          minWidth: 130
        },
        {
          label: '投诉剧集',
          prop: 'chapter_title',
          minWidth: 160
        },
        {
          label: '注册时间',
          prop: 'reg_time',
          minWidth: 110,
          render(h, { row }) {
            return (
              <div>
                <div>{row.reg_time.split(' ')[0]}</div>
                <div>{row.reg_time.split(' ')[1]}</div>
              </div>
            )
          }
        },
        {
          label: '投诉时间',
          prop: 'feed_time',
          minWidth: 110,
          render(h, { row }) {
            return (
              <div>
                <div>{row.feed_time.split(' ')[0]}</div>
                <div>{row.feed_time.split(' ')[1]}</div>
              </div>
            )
          }
        },
        {
          label: '投诉类型',
          prop: 'type_name',
          minWidth: 130
        },
        {
          label: '补充描述',
          prop: 'describe',
          minWidth: 160,
          slotScope: true
        },
        {
          label: '联系方式',
          minWidth: 130,
          prop: 'mobile'
        },
        {
          label: '处理状态',
          prop: 'handle_status',
          minWidth: 100,
          render: (h, { row }) => {
            return (
              <div>
                {' '}
                <i class={row.handle_status == 1 ? 'statusRound-success' : row.handle_status == 2 ? 'statusRound-info' : 'statusRound-warning'} /> <span style='margin-left:5px;'>{row.handle_title}</span>
              </div>
            )
          }
        },
        {
          label: '备注',
          prop: 'remark',
          minWidth: 160
        },
        {
          label: '处理人',
          prop: 'operator',
          minWidth: 100
        },
        {
          label: '处理时间',
          prop: 'handle_time',
          minWidth: 110,
          render(h, { row }) {
            return (
              <div>
                <div>{row.handle_time.split(' ')[0]}</div>
                <div>{row.handle_time.split(' ')[1]}</div>
              </div>
            )
          }
        },
        {
          label: '操作',
          prop: 'zip',
          width: 100,
          slotScope: true,
          fixed: 'right'
        }
      ],
      optionsList: {
        typeList: [],
        handle_status: [
          {
            label: '待处理',
            value: 0
          },
          {
            label: '已处理',
            value: 1
          },
          {
            label: '不处理',
            value: 2
          }
        ]
      },
      drawer: {
        visible: false,
        row: {},
        title: '用户详情'
      },
      handleDrawer: {
        visible: false,
        row: {}
      },
      viewActive: 'column'
    }
  },
  computed: {
    overViewParams() {
      const { mini_app_id = [], feed_start_time = '', feed_end_time = '', type = '', handle_start_time = '', handle_end_time = '', operator = '', handle_status = '' } = Object.assign({}, this.formData)
      this.field == 'time_member_feedback' ? (this.granularity ? this.granularity : (this.granularity = 'day')) : (this.granularity = '')
      return {
        condition: {
          mini_app_id,
          type,
          granularity: this.granularity
        },
        field: this.field,
        feed_time: {
          feed_start_time,
          feed_end_time
        }
      }
    },
    params() {
      const { member_id = '', mini_app_id = [], feed_start_time = '', feed_end_time = '', type = '', handle_start_time = '', handle_end_time = '', operator = '', handle_status = '' } = Object.assign({}, this.formData)
      return {
        type,
        member_id,
        mini_app_id,
        feed_start_time,
        feed_end_time,
        handle_start_time,
        handle_end_time,
        operator,
        handle_status
      }
    }
  },
  mounted() {
    this.onGetTypeList()
    this.onGetList()
    this.onGetOverViewData()
    this.$AccessReport.report('zhangyu-cooperate', [this.$store.state.user.routerItem.name, '投诉反馈'])
  },
  methods: {
    onHandle(row) {
      this.handleDrawer = {
        visible: true,
        row
      }
    },
    handleDate(value) {
      this.formData.handle_start_time = value.start_date
      this.formData.handle_end_time = value.end_date
    },
    onViewTab() {
      this.viewActive = this.viewActive === 'column' ? 'pie' : 'column'
    },
    onOpenView() {
      this.isOpen = !this.isOpen
      this.onGetOverViewData()
    },
    async onGetOverViewData(position) {
      if (!this.isOpen) {
        return
      }
      if (position !== 1) {
        this.viewActive = 'column'
      }

      this.dayAmountChartLoading = true
      const res = await feedbackOverView(this.overViewParams)
      if (res.status_code === 1) {
        this.dayAmountChartData = this.field == 'mini_app_feedback' ? res.data.data.splice(0, 9) : res.data.data
      }
      this.dayAmountChartLoading = false
    },
    async onGetTypeList() {
      const res = await commonData({
        type: 'feedbackType'
      })
      if (res.status_code === 1) {
        this.optionsList.typeList = res.data.data
      }
    },
    miniAppResult(value) {
      this.formData.mini_app_id = value
    },
    resultDate(value) {
      this.formData.feed_start_time = value.start_date
      this.formData.feed_end_time = value.end_date
    },
    startSearch() {
      this.page_info.page = 1
      this.onGetList()
      this.onGetOverViewData(1)
    },
    async onGetList() {
      this.loading = true
      const res = await feedbackIndex({
        ...this.params,
        ...this.page_info
      })
      if (res.status_code == 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    reset() {
      this.formData = {
        member_id: '',
        mini_app_id: [],
        feed_start_time: this.$moment().format('YYYY-MM-DD'),
        feed_end_time: this.$moment().format('YYYY-MM-DD'),
        type: '',
        handle_start_time: '',
        handle_end_time: '',
        operator: '',
        handle_status: ''
      }
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
        this.defaultValue = [this.$moment().format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')]
      }, 200)
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onGetList()
    },
    onSubmit() {
      this.onGetList()
    },
    showDetails(row) {
      this.drawer = {
        title: '用户详情',
        row: row,
        visible: true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.remarks {
}
h3 {
  margin: 0;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  margin-bottom: 16px;
}
.overView_box {
}
.allData_title {
  width: 100%;
  display: flex;
  margin: 0;
  justify-content: space-between;
  .open {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1d2129;
    text-align: left;
    font-style: normal;
    cursor: pointer;
  }
}
.allData_title_text {
  padding-bottom: 10px;
  position: relative;
  color: #00bf8a;
}
.allData_title_text::before {
  content: '';
  display: block;
  width: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #00bf8a;
}
.text {
  /* 强制文字不换行 */
  white-space: nowrap;

  /* 将溢出部分进行隐藏 */
  overflow: hidden;

  /* 溢出文本转换为省略号 */
  text-overflow: ellipsis;
}
</style>